<template>
    <div>
        <h3>添加房型</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td><input type="text" v-model="a.Name"></td>
                </tr>
                <tr>
                    <td>单价</td>
                    <td><input type="text" v-model="a.Price"></td>
                </tr>
                <tr>
                    <td>室内面积</td>
                    <td><input type="text" v-model="a.Area"></td>
                </tr>
                <tr>
                    <td>最多入住人数</td>
                    <td><input type="text" v-model="a.PeopleNum"></td>
                </tr>
                <tr>
                    <td>图片上传</td>
                    <td><input type="file" @change="imgs">
                        <img :src="a.Photo" width="100">
                    </td>
                </tr>
                <tr>
                    <td>房间描述</td>
                    <td><textarea v-model="a.Desc"></textarea></td>
                </tr>
                <tr>
                    <td>是否有窗</td>
                    <td><input type="radio" name="state" v-model="a.State" :value="1">有窗
                        <input type="radio" name="state" v-model="a.State" :value="0">无窗
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="添加" @click="ok"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { isDate } from 'moment';
const router = useRouter();
const route = useRoute();

let a: any = reactive({
    Name: '',
    Price: '',
    Area: '',
    PeopleNum: '',
    Photo: '',
    Desc: '',
    State: 1,
    IsDel: false

})

const imgs: any = (e: any) => {
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);
    axios({
        url: '/api/Imgs/UpImgs',
        method: 'post',
        data: f
    })
        .then((res) => {
            a.Photo = res.data
        })
}

const ok: any = () => {
    if (a.Name == "") {
        alert("名称不能为空");
        return;
    }
    if (a.Price == "") {
        alert("价格不能为空");
        return;
    }
    if (a.Area == "") {
        alert("面积不能为空");
        return;
    }
    if (a.PeopleNum == "") {
        alert("人数不能为空");
        return;
    }
    if (a.Photo == "") {
        alert("图片不能为空");
        return;
    }
    if (a.Desc == "") {
        alert("描述不能为空");
        return;
    }
    axios({
        url: '/api/House/AddHouseType',
        method: 'post',
        data: a
    })
        .then((res) => {
            if (res.data > 0) {
                alert("添加成功");
                router.push("/showtype")
            }
            else {
                alert("添加失败");
                return;
            }
        })
}


</script>

<style scoped></style>